<template>
	<!-- 学习 -->
	<view>
		<global-navgation title="学习"></global-navgation>
		<swiper class="swiper" :autoplay="true" :interval="3000" :duration="3000" :circular="true">
			<swiper-item class="swiper-item">
				<view>
					<image src="../../static/images/42.png" lazy-load="true"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<image src="../../static/images/42.png" lazy-load="true"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="course-list">
			<view class="course-nav">
				<view class="nav-icon"></view>
				<text style="margin-left: 60rpx;">{{title}}</text>
				<view class="more">
					<text>更多</text><text class="iconfont icon-jiantou icon"></text>
				</view>
			</view>
			<view class="line"></view>
			<view class="course-container">
				<view class="course-item">
					<image :src="lists[0].image" lazy-load="true"></image>
					<view class="course-name">
						{{lists[0].title}}
					</view>
					<view class="course-intro">
						{{lists[0].sub_title}}
					</view>
				</view>
				<view class="course-item">
					<image :src="lists[1].image" ></image>
					<view class="course-name">
						{{lists[1].title}}
					</view>
					<view class="course-intro">
						{{lists[1].sub_title}}
					</view>
				</view>

			</view>
			
			
		</view>
<view class="course-list">
			<view class="course-nav">
				<view class="nav-icon"></view>
				<text style="margin-left: 60rpx;">{{grouping}}</text>
				<view class="more">
					<text>更多</text><text class="iconfont icon-jiantou icon"></text>
				</view>
			</view>
			<view class="line"></view>
			<view class="course-container">
				<view class="course-item">
					<image :src="lists[2].image" mode=""></image>
					<view class="course-name">
						{{lists[2].title}}
					</view>
					<view class="course-intro">
						{{lists[2].sub_title}}
					</view>
				</view>
				<view class="course-item">
					<image :src="lists[3].image" mode=""></image>
					<view class="course-name">
						{{lists[3].title}}
					</view>
					<view class="course-intro">
						{{lists[3].sub_title}}
					</view>
				</view>

			</view>
			
			
		</view>
	</view>
</template>

<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default {
		name: 'learn',
		components: {
			globalNavgation
		},
		data() {
			return {
				title:"",
				lists:[],
				tokens:''
			}
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		mounted(){
			// 初始化获取数据
			this.__initClassData()	
		},
		methods:{
			__initClassData() {
				this.$api.get({
					url: '/article/config/get_list',
					data:{token:this.tokens,type:'study'}
				}).then(res => {
						this.lists=res.list.data;
						this.title=res.list.data[0].grouping;
						this.grouping=res.list.data[2].grouping
						console.log(res)
					})
				}
		}
	}
</script>

<style>
	.swiper swiper-item {
		width: 100%;
		height: 350rpx;
	}

	.swiper swiper-item image {
		width: 100%;
		height: 350rpx;
	}

	.course-list {
		width: 100%;
		height: 504rpx;
	}

	.course-list .course-nav {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
		position: relative;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 550;
		font-size: 32rpx;
	}

	.course-list .course-nav .nav-icon {
		width: 12rpx;
		height: 28rpx;
		background: linear-gradient(180deg, rgba(57, 101, 255, 0.5) 0%, rgba(57, 101, 255, 0.2) 100%);
		border-radius: 0 7rpx 7rpx 0;
		position: absolute;
		left: 32rpx;
		top: 36rpx;
	}

	.course-list .course-nav .more {
		width: 96rpx;
		height: 44rpx;
		position: absolute;
		top: 28rpx;
		right: 32rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 44rpx;
		color: rgba(0, 0, 0, 0.5);
	}

	.course-list .course-nav .more .icon {
		font-size: 24rpx;
		font-weight: 700;
		margin-left: 10rpx;
	}

	.course-list .line {
		width: 718rpx;
		height: 2rpx;
		right: 0;
		background: rgba(0, 0, 0, 0.06);
		position: absolute;
	}

	.course-list .course-container {
		width: 100%;
		height: 404rpx;
		display: flex;
	}

	.course-list .course-container .course-item {
		width: 360rpx;
		height: 348rpx;
		background-color: #FFFFFF;
		margin-top: 24rpx;
		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
		margin-left: 32rpx;
	}
	.course-list .course-container .course-item:nth-child(2){
		margin-left: 24rpx;
	}

	.course-list .course-container .course-item image {
		width: 100%;
		height: 206rpx;
	}

	.course-list .course-container .course-item .course-name,
	.course-list .course-container .course-item .course-intro {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 550;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.course-list .course-container .course-item .course-intro {
		font-weight: 550;
		font-size: 24rpx;
		margin-top: 4rpx;
		color: rgba(0, 0, 0, 0.40);
	}
</style>